<template>
  <div class="book-detail">
    <t-card :bordered="false" class="content-card ">
      <div class="flex align-center justify-between pb16">
        <t-space size="18px">
          <h2 class="card-title">仓库管理</h2>
          <t-select style="width: 140px;" v-model="params.w_type" :options="wOptions" clearable @change="getData"
                    placeholder="按仓库类型">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-select style="width: 140px;" v-model="params.status" :options="statusOptions" clearable @change="getData"
                    placeholder="按仓库状态">
            <template #label>
              <icon-font name="layers" style="color: #000;"/>
            </template>
          </t-select>
          <t-input style="width: 220px;" v-model="params.key" clearable @change="getData"
                   placeholder="搜索：名称/联系人">
            <template #label>
              <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
            </template>
          </t-input>
        </t-space>
        <t-space size="16px">
          <t-button @click="handleAdd" class="add-btn">
            <p class="flex align-center">
              <i class="iconfont icon-warehousing" style="font-size: 24px;margin-right: 4px"></i>
              添加仓库
            </p>
          </t-button>
        </t-space>
      </div>

      <t-row :gutter="[16, 16]">
        <t-col :xs="10" :sm="8" :md="6" :lg="4" v-for="item in lists" :key="item.id">
          <t-card :bordered="false" class="col-item">
            <div class="col-content">
              <div class="item-head">
                <div>
                  <h3>{{ item.name }}</h3>
                  <p class="item-hint">{{ item.w_type === 0 ? '平台库' : '代理商库' }}</p>
                </div>
                <t-switch v-model="item.status" :loading="item.loading" size="large" :label="['启用', '禁用']"
                          :custom-value="[1, 0]" @change="changeStatus($event, item)"></t-switch>
              </div>
              <div class="mt16 flex align-center">
                <div class="data-item" @click="goWarehouseProduct(item)">
                  <p class="item-num">{{ item.total_stock ? item.total_stock : 0 }}</p>
                  <p class="item-hint">库存数</p>
                </div>
                <div class="data-item" @click="handleOption('WarehousingHistory', item)">
                  <p class="item-num">{{ item.rk_county ? item.rk_county : 0 }}</p>
                  <p class="item-hint">入库记录</p>
                </div>
                <div class="data-item" @click="handleOption('OutboundHistory', item)">
                  <p class="item-num">{{ item.ck_count ? item.ck_count : 0 }}</p>
                  <p class="item-hint">出库记录</p>
                </div>
                <div class="data-item" @click="handleOption('DispatchHistory', item)">
                  <p class="item-num">{{ item.db_count ? item.db_count : 0 }}</p>
                  <p class="item-hint">调拨记录</p>
                </div>
              </div>
              <div class="flex align-center justify-between mt16">
                <div class="item-footer">
                  <t-button variant="outline" theme="primary" :disabled="item.status === 0" class="opt-item"
                            :class="{'disabled-status': item.status === 0}" @click="goStoreProduct(item)">查看
                  </t-button>
                </div>
                <div>
                  <t-dropdown :min-column-width="40" placement="bottom" trigger="click">
                    <template #dropdown>
                      <t-dropdown-menu>
                        <t-dropdown-item @click="handleEdit(item)">
                          <t-link theme="primary" hover="color">编辑</t-link>
                        </t-dropdown-item>
                        <t-dropdown-item @click="handleInfo(item)">
                          <t-link theme="primary" hover="color">详情</t-link>
                        </t-dropdown-item>
                        <t-dropdown-item @click="handleDelete(item)">
                          <t-link theme="danger" hover="color">删除</t-link>
                        </t-dropdown-item>
                      </t-dropdown-menu>
                    </template>
                    <icon-font name="more" size="18px"></icon-font>
                  </t-dropdown>
                </div>
              </div>
            </div>
          </t-card>
        </t-col>
      </t-row>
    </t-card>

    <!-- 新增 -->
    <warehouse-add ref="add" @refresh="getData"></warehouse-add>
    <!-- 详情 -->
    <warehouse-info ref="info"></warehouse-info>


    <store-detail ref="StoreDetail"></store-detail>
  </div>
</template>

<script lang="jsx">
import {IconFont, CalendarIcon, BrowseIcon} from "tdesign-icons-vue";
import IconUAV from "@/components/icon-UAV/index.vue";
import {warehouseDeleteApi, warehouseEditApi, warehouseListApi} from "@/api/warehouse";
import WarehouseAdd from "@/pages/inventory/components/add.vue";
import WarehouseInfo from "@/pages/inventory/components/info.vue";
import StoreDetail from "@/pages/inventory/store-manage/components/store-detail/index.vue";

export default {
  name: 'WarehouseList',
  components: {StoreDetail, WarehouseAdd, WarehouseInfo, IconUAV, IconFont, BrowseIcon},
  data() {
    return {
      params: {
        page: 1,  // 当前页
        limit: 99999,  // 每页条数
        w_type: '', // 仓库类型（0平台库；1代理商库；）
        key: '',  // 关键字
        status: '', // 状态
      },
      lists: [],
      loading: false,

      statusOptions: [
        {label: '作废', value: -1},
        {label: '禁用', value: 0},
        {label: '启用', value: 1},
      ],
      wOptions: [
        {label: '平台库', value: 0},
        {label: '代理商库', value: 1},
      ],
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 前往仓库产品页面
    goStoreProduct(item) {
      //this.$refs.StoreDetail.open(item.id)
      if (item.status) {
        this.$router.push({
          name: 'StoreDetail',
          query: {
            storeId: item.id
          }
        })
      }
    },
    goWarehouseProduct(item) {
      if (item.status) {

      }
    },
    // 切换状态
    changeStatus(value, item) {
      item.loading = true
      warehouseEditApi({id: item.id, status: value}).then(res => {
        this.$message.success('切换成功')
        this.getList()
      }).catch(err => {
      }).finally(() => {
        item.loading = false
        this.$forceUpdate()
      })
    },
    // 点击操作项
    handleOption(name, item) {
      if (item.status) {
        this.$router.push({
          name: name,
          query: {
            storeId: item.id
          }
        })
      }
    },
    // 添加
    handleAdd() {
      this.$refs.add.open('add')
    },
    // 编辑
    handleEdit(row) {
      this.$refs.add.open('edit', row)
    },
    // 复制
    handleCopy(row) {
      this.$refs.add.open('copy', row)
    },
    // 详情
    handleInfo(row) {
      this.$refs.info.open(row.id)
    },
    // 删除
    handleDelete(row) {
      const confirmDia = this.$dialog.confirm({
        header: '确认删除？',
        body: '删除后数据将不可恢复！是否确认删除？',
        theme: 'warning',
        confirmBtn: '确定',
        cancelBtn: '取消',
        onConfirm: ({e}) => {
          warehouseDeleteApi({id: row.id}).then(res => {
            this.$message.success(res.retmsg)
            this.getList()
            // 请求成功后，销毁弹框
            confirmDia.destroy();
          }).catch(err => {
            if (err.retcode === 4003) {
              confirmDia.hide();
            }
            console.log('err', err)
          })
        },
        onClose: ({e, trigger}) => {
          confirmDia.hide();
        },
      });
    },
    // 获取数据
    getData() {
      this.getList()
    },
    // 获取列表
    getList() {
      this.loading = true
      warehouseListApi(this.params).then(res => {
        this.lists = res.data
      }).catch(err => {
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="less" scoped>
.book-detail {
  min-height: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: var(--td-radius-medium);

  /deep/ .col-item {
    box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.05);

    .t-card__body {
      padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
    }

    .t-card__footer {
      //border-top: 1px solid #e5e5e5;
    }

    .item-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: var(--td-comp-paddingTB-m);

      h3 {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
        color: #000000;
        margin-right: var(--td-comp-margin-m);
      }
    }

    .item-center {
      //padding-top: var(--td-comp-paddingTB-m);

      p {
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .data-item {
      margin-right: 24px;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      .item-num {
        font-size: 17px;
        font-weight: 700;
        line-height: 19.79px;
        color: var(--td-brand-color);
      }


    }

    .item-hint {
      font-size: 14px;
      font-weight: 400;
      line-height: 19.6px;
      text-align: left;
      color: rgba(0, 0, 0, 0.4);
    }

    .item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;

      .opt-item {
        //border-radius: var(--td-radius-medium);
      }

      .disabled-status {
        color: #999999;
        border: 1px solid #EEEEEE;
        background-color: var(--td-bg-color-secondarycomponent);
      }
    }
  }
}

</style>
